<template>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="dialog"
    title="选择类目"
    :style="{ width: props.width + 'px' }"
    @update:show="handleUpdateShow"
  >
    <n-spin :show="loading">
      <n-tree
        block-line
        :data="fileCgyTree"
        default-expand-all
        key-field="fileCgyId"
        label-field="fileCgyNm"
        selectable
        @update-selected-keys="handleChangeCgy"
      />
    </n-spin>
  </n-modal>
</template>
<script lang="ts" setup>
import { ref, watch, unref } from 'vue';
import type { OptionalKeys } from '@yanfan/admin-layout/types';
import type { FileCgyQry001Output_FileCgyDto } from '@yanfan/bmpfl-tsapi/file-cgy/types.d';

defineOptions({
  name: 'BmpflFileSelectCgy',
});

type IFileCgyTreeOption = OptionalKeys<FileCgyQry001Output_FileCgyDto, 'children'>;

const props = withDefaults(
  defineProps<{
    show: boolean;
    fileCgyTree: IFileCgyTreeOption[];
    width?: number;
  }>(),
  {
    show: false,
    fileCgyTree: () => [],
    width: 530,
  },
);
const emits = defineEmits<{
  (e: 'update:show', show: boolean): void;
  (e: 'selected', fileCgyId: string): void;
}>();

const showModal = ref<boolean>(false);
const loading = ref<boolean>(false);

watch(
  () => unref(props).show,
  (show) => {
    showModal.value = show;
  },
);

function handleChangeCgy(keys: string[]) {
  emits('selected', keys[0]);
  emits('update:show', false);
}

function handleUpdateShow(value: boolean) {
  emits('update:show', value);
}
</script>
<style lang="scss" scoped></style>
